<template>
  <div class="map">
    <img src="@/assets/large-screen/map/passenger.png" alt="地图" />
    <!-- 南港 -->
    <div class="map-item map-item-ng">
      <div class="map-item-title">南港</div>
      <div class="map-item-desc">
        <span class="label">进境预警人数：</span>
        <span class="value">50人次</span>
      </div>
      <div class="map-item-desc">
        <span class="label">出岛预警人数：</span>
        <span class="value">50人次</span>
      </div>
    </div>

    <!-- 新海港 -->
    <div class="map-item map-item-xh">
      <div class="map-item-title">新海港</div>
      <div class="map-item-desc">
        <span class="label">进境预警人数：</span>
        <span class="value">50人次</span>
      </div>
      <div class="map-item-desc">
        <span class="label">出岛预警人数：</span>
        <span class="value">50人次</span>
      </div>
    </div>

    <!-- 海口秀英港 -->
    <div class="map-item map-item-hk">
      <div class="map-item-title">海口秀英港</div>
      <div class="map-item-desc">
        <span class="label">进境预警人数：</span>
        <span class="value">50人次</span>
      </div>
      <div class="map-item-desc">
        <span class="label">出岛预警人数：</span>
        <span class="value">50人次</span>
      </div>
    </div>

    <!-- 海口美兰国际机场 -->
    <div class="map-item map-item-hkml">
      <div class="map-item-title">海口美兰国际机场</div>
      <div class="map-item-desc">
        <span class="label">进境预警人数：</span>
        <span class="value">50人次</span>
      </div>
      <div class="map-item-desc">
        <span class="label">出岛预警人数：</span>
        <span class="value">50人次</span>
      </div>
    </div>

    <!-- 琼海博鳌国际机场 -->
    <div class="map-item map-item-qh">
      <div class="map-item-title">琼海博鳌国际机场</div>
      <div class="map-item-desc">
        <span class="label">进境预警人数：</span>
        <span class="value">50人次</span>
      </div>
      <div class="map-item-desc">
        <span class="label">出岛预警人数：</span>
        <span class="value">50人次</span>
      </div>
    </div>

    <!-- 三亚邮轮港 -->
    <div class="map-item" style="bottom: 255px; left: 83px">
      <div class="map-item-title">三亚邮轮港</div>
      <div class="map-item-desc">
        <span class="label">进境预警人数：</span>
        <span class="value">50人次</span>
      </div>
      <div class="map-item-desc">
        <span class="label">出岛预警人数：</span>
        <span class="value">50人次</span>
      </div>
    </div>

    <!-- 三亚国际游艇中心 -->
    <div class="map-item" style="bottom: 93px; left: 96px">
      <div class="map-item-title">三亚国际游艇中心</div>
      <div class="map-item-desc">
        <span class="label">进境预警人数：</span>
        <span class="value">50人次</span>
      </div>
      <div class="map-item-desc">
        <span class="label">出岛预警人数：</span>
        <span class="value">50人次</span>
      </div>
    </div>

    <!-- 三亚凤凰国际机场 -->
    <div class="map-item" style="bottom: 255px; left: 248px">
      <div class="map-item-title">三亚凤凰国际机场</div>
      <div class="map-item-desc">
        <span class="label">进境预警人数：</span>
        <span class="value">50人次</span>
      </div>
      <div class="map-item-desc">
        <span class="label">出岛预警人数：</span>
        <span class="value">50人次</span>
      </div>
    </div>

    <!-- 三亚半山半岛帆船港 -->
    <div class="map-item" style="bottom: 98px; left: 312px">
      <div class="map-item-title">三亚半山半岛帆船港</div>
      <div class="map-item-desc">
        <span class="label">进境预警人数：</span>
        <span class="value">50人次</span>
      </div>
      <div class="map-item-desc">
        <span class="label">出岛预警人数：</span>
        <span class="value">50人次</span>
      </div>
    </div>

    <!-- 陵水清水湾游艇码头 -->
    <div class="map-item" style="bottom: 288px; left: 410px">
      <div class="map-item-title">陵水清水湾游艇码头</div>
      <div class="map-item-desc">
        <span class="label">进境预警人数：</span>
        <span class="value">50人次</span>
      </div>
      <div class="map-item-desc">
        <span class="label">出岛预警人数：</span>
        <span class="value">50人次</span>
      </div>
    </div>

    <!-- 热量图：点 -->
    <div class="dot dot1" title="南港"></div>
    <div class="dot dot2" title="新海港"></div>
    <div class="dot dot3" title="海口秀英港"></div>
    <div class="dot dot4" title="海口美兰国际机场"></div>
    <div class="dot dot5" title="海口秀英港"></div>
  </div>
</template>

<script setup lang="ts"></script>

<style lang="less" scoped>
.map {
  position: relative;
  .map-item {
    position: absolute;
  }

  .map-item-ng {
    top: 195px;
    right: 313px;
  }

  .map-item-xh {
    top: 125px;
    right: 322px;
  }

  .map-item-hk {
    top: 41px;
    right: 260px;
  }

  .map-item-hkml {
    top: 33px;
    right: 75px;
  }

  .map-item-qh {
    top: 210px;
    right: 95px;
  }

  .dot {
    position: absolute;
    top: 300px;
    left: 200px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: radial-gradient(
      circle,
      rgba(255, 0, 0, 1) 0%,
      rgba(255, 165, 0, 0.7) 40%,
      rgba(255, 255, 0, 0.5) 70%,
      rgba(255, 255, 255, 0) 100%
    );
    &:hover {
      cursor: pointer;
      transform: scale(1.2);
      transition: transform 0.3s ease;
    }

    &.dot1 {
      top: 110px;
      left: 450px;
      background: radial-gradient(
        circle,
        rgba(0, 0, 255, 0.8),
        transparent 70%
      );
    }

    &.dot2 {
      top: 107px;
      left: 473px;
      background: radial-gradient(
        circle,
        rgba(0, 255, 0, 0.8),
        transparent 70%
      );
    }

    &.dot3 {
      top: 123px;
      left: 475px;
      background: radial-gradient(
        circle,
        rgba(255, 255, 0, 0.8),
        transparent 70%
      );
    }

    &.dot4 {
      top: 250px;
      left: 250px;
      background: radial-gradient(
        circle,
        rgba(255, 165, 0, 0.8),
        transparent 70%
      );
    }

    &.dot5 {
      top: 300px;
      left: 300px;
      background: radial-gradient(
        circle,
        rgba(255, 0, 0, 0.8),
        transparent 70%
      );
    }
  }
}
</style>
